<template>
	<view class="container">
		<view class="serial-port-box">
			<view class="information">
				<uni-data-select v-model="deviceValue" :localdata="deviceList" @change="onDeviceChange" :clear="false"
					:disabled="openFlag"></uni-data-select>

				<view class="information-list">
					<view class="information-list-item">
						<view>波特率：</view>
						<input v-model="information.baudRate" type="number" placeholder="请输入波特率" :disabled="openFlag" />
					</view>
				</view>
			</view>
			<button class="open-button" :type="openFlag ? 'warn' : 'primary'"
				@click="onOpen">{{openFlag ? '关闭' : '打开'}}</button>
		</view>
		<scroll-view class="message-box" :scroll-y="true">
			<view class="mu-list">
				<template v-for="item in messageList">
					<view class="mu-list-item">
						<text :class="{'read-data': item.type == 1}">{{item.type == 1 ? '收' : '发'}}</text>
						{{item.content}}
					</view>
				</template>
			</view>
		</scroll-view>
		<button class="clear-button" type="default" @click="onClear">清空数据</button>

		<view class="write-box">
			<input v-model="sendData" type="text" placeholder="请输入发送数据" />
			<button class="send-button" type="primary" @click="onSend" :disabled="!openFlag">发送</button>
		</view>

		<view class="remark-box">
			<view class="title">插件使用说明：</view>
			<view>1. 打开manifest.json文件，重新获取APPID</view>
			<view>2. 在插件页面选择试用，再选择示例项目</view>
			<view>3. 在manifest.json文件中，选择【APP原生插件配置】->【选择云端插件】，然后勾选本插件</view>
			<view>4. 打包自定义基座</view>
			<view>5. 运行到Android真机设备调试</view>
		</view>
	</view>
</template>

<script>
	const muSerialPort = uni.requireNativePlugin('Mu-Serial-Port');
	export default {
		data() {
			return {
				deviceValue: 0,
				deviceList: [],
				information: {
					deviceName: '', // 设备地址
					baudRate: 9600, // 波特率
					dataBits: 8, // 数据位
					stopBits: 1, // 停止位
					parity: 0, // 奇偶校验
				},
				openFlag: false,
				sendData: '0122',
				messageList: []
			}
		},
		onLoad() {
			let devicePathList = muSerialPort.getSerialPorts();
			for (var i = 0; i < devicePathList.length; i++) {
				this.deviceList.push({
					value: i,
					text: devicePathList[i]
				})
			}
			this.deviceValue = 0;
			this.information.deviceName = this.deviceList[0].text
		},
		methods: {
			onDeviceChange(value) {
				this.deviceValue = value;
				this.information.deviceName = this.deviceList[value].text
			},
			onOpen() {
				let params = this.information;

				
				if (this.openFlag) {
					this.openFlag = false
					muUsbSerial.disconnect(params.deviceName);
				} else {
					if (!params.deviceName) {
						uni.showToast({
							title: '请选择串口地址',
							icon: 'none'
						})
						return
					}

					muSerialPort.connect(params, res => {
						let {
							code,
							message,
							data
						} = res;
						/**
						 * code: 返回响应码，1标识串口打开成功，200表示读取成功，其他异常
						 * message：响应消息
						 * data: 读取的消息
						 */
						console.log(res)

						if (code == 1) {
							// 串口打开成功
							this.openFlag = true
						}

						if (code == 200) {
							// 读取数据成功
							this.messageList.push({
								type: 1,
								content: data
							})
						}
					});
				}
			},
			onSend() {
				if (!this.sendData) {
					uni.showToast({
						title: '发送数据不能为空',
						icon: 'none'
					})
					return
				}

				muSerialPort.send({
					deviceName: this.information.deviceName, // 设备地址
					data: this.sendData // 写数据
				}, res => {
					console.log(res)
					if (res.code == 2) {
						this.messageList.push({
							type: 0,
							content: this.sendData
						})

						// this.sendData = ''
					}
				})
			},
			onClear() {
				this.messageList = []
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}

	.container {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.serial-port-box {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.serial-port-box .information {
		flex: 1;
		margin-right: 20rpx;
	}

	.information-list {
		font-size: 28rpx;
		color: #999;
		margin-top: 20rpx;
	}

	.information-list-item {
		display: flex;
		align-items: center;
	}

	.information-list-item input {
		flex: 1;
		height: auto;
		margin-left: 10rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		color: #333;
		font-size: 28rpx;
	}

	.open-button {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 120rpx;
	}

	.container .message-box {
		width: 100%;
		height: 600rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.mu-list {
		font-size: 32rpx;
		color: #333;
	}

	.mu-list .mu-list-item {
		margin-bottom: 10rpx;
	}

	.mu-list .mu-list-item:last-child {
		margin-bottom: 0;
	}

	.mu-list-item text {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 24rpx;
		background-color: #42B983;
		margin-right: 20rpx;
	}

	.read-data {
		background-color: #007aff !important;
	}

	.clear-button {
		margin-top: 10rpx;
		width: 200rpx;
		height: 60rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #666;
		font-weight: 400;
		line-height: 60rpx;
	}

	.clear-button:after {
		border-radius: 60rpx;
	}

	.write-box {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.write-box input {
		flex: 1;
		margin-right: 20rpx;
		color: #333;
		font-size: 28rpx;
	}

	.send-button {
		width: 120rpx;
		height: 60rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 60rpx;
	}

	.remark-box {
		margin-top: 30rpx;
		color: #999;
		font-size: 24rpx;
		border-top: 1px solid #eee;
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	.remark-box view {
		margin-left: 20rpx;
		margin-bottom: 10rpx;
	}

	.title {
		color: #666;
		margin-left: 0 !important;
	}
</style>